<template>
  <div class="div" ref="div">
    
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
// import {getstudent} from '../../request/index'
import {onMounted,ref,reactive,watch} from 'vue'
import moment from 'moment'
import {option1} from '../echarts/echartdata'

const div=ref()
let myChart 

let currentTime=Date.now();
const data=reactive([
  moment(currentTime-210000).format('HH:mm:ss'),
  moment(currentTime-180000).format('HH:mm:ss'),
  moment(currentTime-150000).format('HH:mm:ss'),
  moment(currentTime-120000).format('HH:mm:ss'),
  moment(currentTime-90000).format('HH:mm:ss'),
  moment(currentTime-60000).format('HH:mm:ss'),
  moment(currentTime-30000).format('HH:mm:ss'),
]);


function getXaisData(){
  var timer=null;
  timer=setInterval(()=>{
    data.shift()
    data.push(moment(new Date()).format('HH:mm:ss'));
  },3000)
  return data
}

watch(data,()=>{
  getstus()
    myChart=echarts.init(div.value)
    myChart.setOption(option1)
})

const getstus=()=>{
  let ws=new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086");
  ws.onmessage=function(result){
    let leftBottomData=JSON.parse(result.data)
 
    let SeriesData=[]
      for (let i = 0; i < leftBottomData.seriesData.length; i++) {
        let seriesDataItem = {
          name: leftBottomData.legendData[i],
          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          data: leftBottomData.seriesData[i]
        }
        SeriesData.push(seriesDataItem)
      }
      option1.legend.data=leftBottomData.legendData;
      option1.xAxis.data=data
      option1.series=SeriesData
  }
}




onMounted(()=>{
   getXaisData()
   getstus()
     myChart=echarts.init(div.value)
    myChart.setOption(option1)

})
  window.addEventListener('resize', function() {
    myChart.resize();
  });


</script>

<style scoped>
.div{
   
    height:90%;
}
</style>